import {useState} from 'react'
import './index.css'

export function ClassDemo ({data}) {

    // let showClass = false
    const [showClass,setShowClass] = useState(false)


    const classObj = {
        box: true,
        show: showClass,
        hide: !showClass
    }

    const styleObj = {
        fontSize:'20px',
        color:'red'
    }

    function changeColor() {
        setShowClass(!showClass)
    }



    return (
        <div>
         <h3>类名绑定，style绑定</h3>
         <div>1. 类名绑定属性是 className ，可以使用模板字符串绑定多个，支持三元运算</div>
         <div className={`box ${showClass ? 'show':'' }`}>
            思念在下坠
         </div>

         <h3>对象方式</h3>
         <div className={Object.keys(classObj).filter(key => classObj[key]).join(" ")}>材米油盐略显清淡</div>

         <antd.Button onClick={changeColor}>改变颜色</antd.Button>

         <h3>style绑定对象</h3>
         <div style={styleObj}>过堂风</div>
        </div>
    )

}